<template>
    <div class="box">
        <div class="header">
            <!-- <van-search v-model="value" show-action  placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <button style="background-color: green; color: white;border-radius: 20px;width: 80px; border: 1px solid white;">打开APP</button>
                </template>
                <template #left>
                  <p style="color: green; font-size: 25px;font-weight: 700;">豆瓣</p>
                </template> -->
            <!-- </van-search> -->
        </div>
        <div class="meddle">
            <ul>
                <li v-for="item in list" :key="item.id" style="float: left;">
                    <img :src="item.image" alt="" @click="$router.push('/detail/'+item.id)" >
                    <p style="">{{ item.title }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
    import request from '@/utils/request.js'
    import { ref,onMounted } from "vue";
    const list=ref([])
    onMounted(()=>{
        request.get('/list',{
            params:{
                pagination:1, pageNum:20
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
        })
    })
</script>